<!doctype html>
<html>
<head>
	<title></title>
    <link rel="stylesheet" href="editor.css">
    <style type="text/css" media="screen">
    	#controller {
    		width: 400px;
    		margin: 0 auto;
    	}
    </style>
</head>
<body>


<div id="editor" style="width:400px;height:150px;margin:1px auto;"></div>

<div id="controller">
	<button id="getTxt">获取文本内容</button>
	<button id="getHtml">获取HTML</button>
	<br>
	<textarea name="" id="setInput" cols="30" rows="2"></textarea>
	<br>
	<button id="setTxt">设置内容</button>
	<button id="addTxt">添加内容</button>
	<p id="instTxt">输入@插入内容</p>
</div>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="logger.js"></script>
<script src="editor.js"></script>
<script>
	
	var e = new triangle.CommentBox('editor');
	var logger = new Logger();
	$('#getTxt').on('click', function(){
		var content = e.getContent();
		logger.log(content);
	});

	$('#getHtml').on('click', function(){
		var content = e.getContent('html');
		logger.log(content);
	});

	$('#setTxt').on('click', function(){
		var v = $('#setInput').val();
		e.setContent(v);
	});

	$('#addTxt').on('click', function(){
		var v = $('#setInput').val();
		e.appendToContent(v);
	});

	$('#instTxt').on('click', function(){
		e.insertToContent('in here');
	});

	e.on('keyup',function(){
		var evt = Array.prototype.slice.call(arguments)[0];
		var v = $('#setInput').val();
		if (evt.shiftKey && evt.keyCode == 50) {
			this.insertToContent(v);
		}
		
	})
	
	
</script>
</body>
</html>